.header {
	display: flex;
	justify-content: space-between;
	margin-top: 5.88vh;
	margin-left: 5.09vw;
	margin-right: 7.777vw;
}
.header .list {
	width: 5vw;
}
.header .main {
	width: 47.68vw;
	display: flex;
	justify-content: space-between;
}
/* nth-child  结构伪类选择器，选第n个 */
.header .main img:nth-child(1) {
	width: 5.18vw;
}
.header .main img:nth-child(2) {
	width: 5vw;
}
.header .main img:nth-child(3) {
	width: 5vw;
}


.header .search {
	width: 4.16vw;
	height: 4.16vw;
}
/* 隐藏的导航 */
.nav {
	width: 40vw;
	height: 80vh;
	background-color: #fff;
	/* 绝对定位，相对于网页 */
	position: absolute;
	left: -40vw;
	top: 10.93vh;
	/* 过渡：看到中间的变化过程 */
	transition: all 0.2s;
}

.container {
	
}
.container > div {
	/* 隐藏 */
	display: none;
}
/* 第一层*/
.f1 {
	/* height: 6.77vh; */
	margin-left: 3.7vw;
	margin-right: 3.7vw;
	margin-top: 3.645vh;
	border-bottom: 1px solid #0a8ec5;
	display: flex;
	padding-bottom: 1.35vh;
}
.f1 .avatar {
	width: 12.22vw;
	height: 12.22vw;
	/* 正圆 */
	border-radius: 50%;
}
.f1 .member {
	margin-left: 4.07vw;
	margin-top: 1.56vh;
}
.f1 .member p:nth-child(1) {
	/* font-size: 2.78vw; */
}
.f1 .member p:nth-child(1) img {
	width: 18px;
}
.f1 .member p:nth-child(2) {
	font-size: 1.67vw;
	color: #b5b4bb;
	margin-top: 5px;
}
.f1 .member p:nth-child(2) span {
	color: #f9a80b;
	border: 2px solid #f9a80b;
	border-radius: 3px;
	padding-left: 2px;
	padding-right: 2px;
}
.f1 .mail {
	width: 3.7vw;
	height: 1.71vh;
	margin-left: 36vw;
	margin-top: 2.6vh;
}
/* f2 */
.f2 {
	display: flex;
	padding-top: 2.6vh;
	padding-bottom: 2.6vh;
	border-bottom: 0.83vh solid rgba(255,255,255,0.15);
}	
.f2 div {
	width: 25%;
	text-align: center;
}
.f2 div img {
	width: 7.41vw;
	height: 7.41vw;
}
/* 父级下第2个，必须是p */
.f2 div p:nth-child(2) {
	font-size: 3.33vw;
	margin-top: 1vh;
}
.f2 div p:nth-child(3) {
	font-size: 2.78vw;
	color: #a5a1a1;
}
/* f3 */
.f3 {
	display: flex;
	/* 弹性布局下，一行占满，自动换行 */
	flex-wrap: wrap;
}
.f3 div {
	width: 33.3333%;
	text-align: center;
	margin-top: 1.5625vh;
}
.f3 div img {
	width: 15.185vw;
	height: 15.185vw;
}
.f3 div p {
	font-size: 2.7vw;
	margin-top: 1vh;
	color: #87cbcc;
}

.f4 {
	height: 7.5vh;
	line-height: 7.5vh;
	padding-left: 11.296vw;
	border-bottom: 1px solid #0a8ec5;
	border-top: 1px solid #0a8ec5;
	margin-left: 3.7vw;
	margin-right: 3.7vw;
	margin-top: 3.229vh;
	background-image: url(../img/Volumen.svg);
	background-repeat: no-repeat;
	background-position: 3.7vw center;
	background-size: 5.56vw 5.56vw;
	display: flex;
}
.f4 span {
	color: #87cbcc;
}
.f4 div {
	/* background-color: pink; */
	width: 72vw;
	overflow: hidden;
	color: #abc2d0;
	font-size: 2.78vw;
}
.f4 div ul {
	width: 300vw;
	display: flex;
	/* 调用动画 */
	animation: play 8s linear infinite;
}
.f4 div ul:hover {
	animation-play-state: paused;
}
.f4 div ul li {
	width: 24vw;
}
@keyframes play {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(-120vw);
	}
}

/* f5 */
.f5 {
	height: 8.85vh;
	width: 100vw;
	background-color: #151f28;
	/* 绝对定位: 相对于整个网页 */
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
}
.f5 .pic {
	width: 16.48vw;
	height: 16.48vw;
	border-radius: 50%;
	border: 3px solid #080c10;
	margin-left: 3.333vw;
	margin-top: -2vh;
}
.f5 .play-box {
	width: 72.037vw;
	margin-left: 4.444vw;
}
.f5 .play-box .play {
	height: 3px;
	background-color: #02182d;
	margin-top: 2.448vh;
	position: relative;
}
.f5 .play-box .play div {
	height: 3px;
	background-color: #2190f3;
	width: 10%;
}
.f5 .play-box .play span {
	position: absolute;
	width: 10px;
	height: 10px;	
	background-color: #2190f3;
	border-radius: 50%;
	left: 10%;
	top: -4px;
}
.play-info {
	display: flex;
}
.play-info div {
	width: 31.48vw;
}
.play-info div p:nth-child(1) {
	font-size: 14px;
}
.play-info div p:nth-child(2) {
	font-size: 12px;
} 
.play-info img:nth-child(2) {
	width: 3.51vw;
	/* height: 4.629vw; */
	margin-left: 5.37vw;
}
.play-info img:nth-child(3) {
	width: 3.51vw;
	margin-left: 12vw;
}

.play-info img:nth-child(4) {
	width: 3.51vw;
	margin-left: 12vw;
}